<template>
  <div>
    <router-link :to="'/home'">跳转到home</router-link>
    <router-link to="/about/1?name=xiaowang"> 跳转到about</router-link>
    <button @click="ditle('1')">点击跳转到home</button>

    <!-- keep-alive 默认缓存已加载的组件 组件不会直接卸载 -->
    <!-- 
      include="组件名称"  配置需要缓存的组件
      exclude="组件名称"  排除不需要缓存的组件
     -->
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    ditle(id) {
      console.log(this.$router);
      console.log(this.$route);
      //$router 中的history有push/replace/go 等方法
      //go 是返回跳转到上一步或下一步 不能传递数据
      this.$router.history.push({
        name: "Home",

        query: {
          age: 19,
          sex: "nan",
        },
        params: {
          //属性名要和route中配置的一致
          id,
        },
      });
    },
  },
};
</script>

<style>
</style>